<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圣达信高考资讯</title>
    <link rel="stylesheet" href="${ctxPath}/plugins/layui/css/layui.css">
    <script src="${ctxPath}/plugins/layui/layui.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <link rel="stylesheet" type="text/css" href="${ctxPath}/login/css/login.css" />
    <!--必要样式-->
    <link rel="stylesheet" type="text/css" href="${ctxPath}/login/css/component.css" />

    <style rel="stylesheet" type="text/css">
        .layui-tab-title li:first-child > i {
            display: none;
        }
    </style>
</head>
<body class="layui-layout-body"><div class="container demo-1">
    <div class="content">
        <div id="large-header" class="large-header">
            <canvas id="login-canvas"></canvas>
            <div class="logo_box">
                <h3>用户登录</h3>
                <form action="#"name="f" method="post">
                    <div class="input_outer">
                        <span class="u_user"></span>
                        <input name="username" id="username" class="text" style="color: #FFFFFF !important" type="text" placeholder="请输入账户" autocomplete="off"
                               onkeyup="this.value=this.value.replace(/\s+/g,'')" value="">
                    </div>
                    <div class="input_outer">
                        <span class="us_uer"></span>
                        <input name="password" id="password" class="text" style="color: #FFFFFF !important; position:absolute; z-index:100;" value="" type="password" placeholder="请输入密码"
                               onkeyup="this.value=this.value.replace(/\s+/g,'')">
                    </div>
                    <div class="mb2">
<!--                        <div class="mb2"><div id="slider"></div></div>-->

                        <input id="code" placeholder="请输入验证码" type="text" class="code" autocomplete="off" maxlength = 4
                               style="color: #FFFFFF !important;">
                        <!-- 验证码 显示 -->
                        <img id="verifyimg" style="width: 100px;height: 46px;border: rgba(255,255,255,0.2) 2px solid !important;" />

                    </div>
                    <div class="mb2">
                        <div class="mb2"><a id = "sub" lay-filter="sub" class="act-but submit" href="javascript:;" style="color: #FFFFFF">登录</a></div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div><!-- /container -->
<script src="${ctxPath}/login/js/login.js"></script>

<script>
    //加载弹出层组件
    layui.extend({
        // sliderVerify: '${ctxPath}/plugins/layui_extends/sliderVerify'  //  {/}的意思即代表采用自有路径，即不跟随 base 路径
    }).use(['layer'],function(){
        var $ = layui.$,
            layer = layui.layer;
            // sliderVerify=layui.sliderVerify;
        // var slider = sliderVerify.render({
        //     elem: '#slider',
        //     isAutoVerify:false,//关闭自动验证
        //     // bg : '#d3d7d4',//自定义背景样式名
        //     text : '请拖动滑块验证',
        //     onOk: function(){//当验证通过回调
        //         // layer.msg("滑块验证通过");
        //     }
        // });

        getvCode();

        $("#verifyimg").click(function(){
            getvCode();
        });
        /**
         * 获取验证码
         * 将验证码写到login.html页面的id = verifyimg 的地方
         */
        function getvCode() {
            // document.getElementById("verifyimg").src = timestamp("${ctxPath}/verifyCode");
            $("#verifyimg").attr('src',timestamp("${ctxPath}/verifyCode"));
        }
        //为url添加时间戳
        function timestamp(url) {
            var getTimestamp = new Date().getTime();
            if (url.indexOf("?") > -1) {
                url = url + "&timestamp=" + getTimestamp
            } else {
                url = url + "?timestamp=" + getTimestamp
            }
            return url;
        };


        //登录的点击事件
        $("#sub").on("click",function(){
            login();
        });

        $("body").keydown(function(){
            if(event.keyCode == "13"){
                login();
            }
        });
        //登录函数
        function login(){
            var username = $(" input[ name='username' ] ").val();
            var password = $(" input[ name='password' ] ").val();
            var code = $("#code").val();
            if(username==""||username==null){
                $("#username").focus();
                layer.tips('请输入用户名', '#username');
                // slider.reset();
                getvCode();
                return;
            }
            if(password==""||password==null){
                $("#password").focus();
                layer.tips('请输入密码', '#password');
                // slider.reset();
                getvCode();
                return;
            }
            if(code==""||code==null){
                $("#code").focus();
                layer.tips('请输入验证码', '#code');
                getvCode();
                return;
            }
            // if(!slider.isOk()){
            //     layer.msg("请先通过滑块验证");
            //     return;
            // }
            $.ajax({
                url:"${ctxPath}/login.do",
                data:{"username":username,"password":password,'code':code},
                type:"post",
                dataType:"json",
                success:function(data){
                    if(data.code==0){
                        window.location = "${ctxPath}/"+data.data;
                    }else{
                        // slider.reset();
                        getvCode();
                        layer.msg(data.msg);
                    }
                }
            })
        }
    })
</script>
</html>